<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最新新闻 - RFID幼儿园无源手环</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* 新闻列表页专属样式 */
        .news-page {
            margin-top: 80px; /* 避开导航栏 */
            padding: 40px 0;
        }

        .news-list {
            margin-top: 30px;
        }

        .news-item {
            background-color: #FFFFFF;
            padding: 25px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }

        .news-item:hover {
            transform: translateY(-3px); /* 轻微上浮，增强交互感 */
        }

        .news-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .news-title {
            font-size: 20px;
            font-weight: bold;
        }

        .news-title a {
            text-decoration: none;
            color: #333333;
            transition: color 0.3s;
        }

        .news-title a:hover {
            color: #4CAF50; /* hover变主题色 */
        }

        .news-date {
            font-size: 14px;
            color: #999999;
        }

        .news-excerpt {
            font-size: 16px;
            color: #666666;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 只显示2行摘要 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-more {
            color: #4CAF50;
            text-decoration: none;
            font-size: 14px;
        }

        .news-more:hover {
            text-decoration: underline;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }

        .pagination a {
            display: inline-block;
            padding: 8px 15px;
            margin: 0 5px;
            border: 1px solid #E8E8E8;
            border-radius: 4px;
            text-decoration: none;
            color: #333333;
            transition: background-color 0.3s, color 0.3s;
        }

        .pagination a:hover, .pagination a.active {
            background-color: #4CAF50;
            color: #FFFFFF;
            border-color: #4CAF50;
        }
        
        .pagination a.disabled {
            color: #CCCCCC;
            cursor: not-allowed;
        }
        
        .pagination a.disabled:hover {
            background-color: transparent;
            color: #CCCCCC;
            border-color: #E8E8E8;
        }
        
        .news-category {
            display: inline-block;
            background-color: #E8F5E9;
            color: #4CAF50;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
        <div class="nav-container">
            <nav class="nav">
                <div class="logo">RFID无源手环</div>
                
                <!-- 汉堡菜单按钮 -->
                <div class="hamburger" id="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                
                <!-- 导航菜单 -->
                <ul class="nav-menu" id="navMenu">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="product.html">产品介绍</a></li>
                    <li><a href="news.html">最新新闻</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
        </div>

    <!-- 新闻列表主体 -->
    <div class="news-page">
        <div class="container">
            <h2 class="section-title">最新新闻</h2>

            <div class="news-list" id="newsList">
                <!-- 新闻列表将通过JavaScript动态生成 -->
            </div>

            <!-- 分页 -->
            <div class="pagination" id="pagination">
                <!-- 分页将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>项目名称：基于RFID的幼儿园健康监测物联网平台</p>
            <p>联系电话：13192272958 | 邮箱：adc1723550259@163.com</p>
            <p>地址：珠海市珠海科技学院 | 邮编：519000</p>
            <p>© 2024 版权所有 | 环保简约 · 科技守护幼儿健康</p>
        </div>
    </footer>

    <!-- 引入新闻数据 -->
    <script src="news-data.js"></script>
    
    <!-- 新闻列表功能脚本 -->
    <script>
        // 分页设置
        const itemsPerPage = 5;
        let currentPage = 1;
        
        // 动态生成新闻列表
        function renderNewsList(page = 1) {
            const newsList = document.getElementById('newsList');
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            
            // 按日期降序排列（最新的在前）- 在分页之前排序
            const sortedNews = [...allNews].sort((a, b) => new Date(b.date) - new Date(a.date));
            const pageNews = sortedNews.slice(startIndex, endIndex);
            
            let html = '';
            
            if (pageNews.length === 0) {
                html = '<p style="text-align: center; color: #666; padding: 40px;">暂无新闻</p>';
            } else {
                pageNews.forEach(news => {
                    html += `
                    <div class="news-item">
                        <div class="news-header">
                            <h3 class="news-title">
                                <a href="news-detail.html?id=${news.id}">${news.title}</a>
                                <span class="news-category">${news.category}</span>
                            </h3>
                            <span class="news-date">${news.date}</span>
                        </div>
                        <p class="news-excerpt">${news.excerpt}</p>
                        <a href="news-detail.html?id=${news.id}" class="news-more">阅读全文 →</a>
                    </div>
                    `;
                });
            }
            
            newsList.innerHTML = html;
            renderPagination(page, Math.ceil(allNews.length / itemsPerPage));
        }
        
        // 分页功能
        function renderPagination(currentPage, totalPages) {
            const pagination = document.getElementById('pagination');
            
            if (totalPages <= 1) {
                pagination.innerHTML = '';
                return;
            }
            
            let html = '';
            
            // 上一页
            if (currentPage > 1) {
                html += `<a href="#" onclick="changePage(${currentPage - 1}); return false;">上一页</a>`;
            } else {
                html += `<a href="#" class="disabled">上一页</a>`;
            }
            
            // 页码
            const maxVisiblePages = 5;
            let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
            
            if (endPage - startPage + 1 < maxVisiblePages) {
                startPage = Math.max(1, endPage - maxVisiblePages + 1);
            }
            
            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<a href="#" class="active">${i}</a>`;
                } else {
                    html += `<a href="#" onclick="changePage(${i}); return false;">${i}</a>`;
                }
            }
            
            // 下一页
            if (currentPage < totalPages) {
                html += `<a href="#" onclick="changePage(${currentPage + 1}); return false;">下一页</a>`;
            } else {
                html += `<a href="#" class="disabled">下一页</a>`;
            }
            
            pagination.innerHTML = html;
        }
        
        // 切换页面
        function changePage(page) {
            currentPage = page;
            renderNewsList(page);
            // 滚动到列表顶部
            document.querySelector('.news-list').scrollIntoView({ behavior: 'smooth' });
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL参数获取当前页码
            const urlParams = new URLSearchParams(window.location.search);
            const pageParam = urlParams.get('page');
            if (pageParam && !isNaN(pageParam) && pageParam > 0) {
                currentPage = parseInt(pageParam);
            }
            
            renderNewsList(currentPage);
        });
    </script>
	<script>
	        // 汉堡菜单交互功能
	        document.addEventListener('DOMContentLoaded', function() {
	            const hamburger = document.getElementById('hamburger');
	            const navMenu = document.getElementById('navMenu');
	            
	            // 点击汉堡菜单切换导航显示
	            hamburger.addEventListener('click', function() {
	                hamburger.classList.toggle('active');
	                navMenu.classList.toggle('active');
	            });
	            
	            // 点击导航链接后关闭移动端菜单
	            const navLinks = document.querySelectorAll('.nav-menu a');
	            navLinks.forEach(link => {
	                link.addEventListener('click', function() {
	                    if (window.innerWidth <= 768) {
	                        hamburger.classList.remove('active');
	                        navMenu.classList.remove('active');
	                    }
	                });
	            });
	            
	            // 窗口大小变化时重置菜单状态
	            window.addEventListener('resize', function() {
	                if (window.innerWidth > 768) {
	                    hamburger.classList.remove('active');
	                    navMenu.classList.remove('active');
	                }
	            });
	        });
	    </script>
</body>
</html>